<template>
	<view>
		<uNavbar title="批量出售"></uNavbar>
		<view class=" flex_ld_a">
			<text class="f24 c4">挂单时间:{{Hallconfig.hatch_goods_sell_start_time*1000 | date('hh:MM')}} ~ {{Hallconfig.hatch_goods_sell_end_time*1000 | date('hh:MM')}}</text>
			<text class="f24 c4">交易时间:{{Hallconfig.hatch_goods_buy_start_time*1000 | date('hh:MM')}} ~ {{Hallconfig.hatch_goods_buy_end_time*1000 | date('hh:MM')}}</text>
		</view>
		<view class="bulk_box flex_dq">
			<view class="bulk_l flex_c">
				<image :src="salesDetail.goods_image" mode=" aspectFill"></image>
			</view>
			<view class="bulk_r flex_Z">
				<view class="bulk_r_top flex_ld">
					<text>{{salesDetail.goods_name}}</text>
				</view>
				<view class="bulk_r_center flex_ld">
					<text>藏品发售价</text>
					<view class="money flex_dq">
						<image src="../../static/icon/fhtb.png" mode=""></image>
						<text>{{salesDetail.goods_price}}</text>
					</view>
				</view>
				<view class="bulk_r_center flex_ld">
					<text>最新成交价</text>
					<view class="money flex_dq">
						<image src="../../static/icon/fhtb.png" mode=""></image>
						<text>{{salesDetail.transaction_price}}</text>
					</view>
				</view>
				<view class="bulk_r_top flex_ld">
					<text>当前指导价：</text>
					<view class="money flex_ld">
						<image src="../../static/icon/fhtb.png" mode=""></image>
						<text>{{guidancePrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="saleslist flex_Z">
			<view class="saleslist_top flex_ld">
				<view class="sales_l flex_dq">
					<text>默认排序</text>
					<image v-if="state" src="../../static/icon/icon_x.png" mode="" @click="changeUp"></image>
					<image v-if="!state" src="../../static/icon/icon_s.png" mode="" @click="changeUp"></image>
				</view>
				<view class="sales_r flex_dq" @click="changeQuan">
					<u-icon name="checkmark-circle" :color="isSelect ? '#FF2CDF':'#ffffff'" size="18"></u-icon>
					<text :class="isSelect ?'actives':''">全选</text>
				</view>
			</view>
			<view class="saleslist_center flex_Z">
				<view class="saleslist_center_box flex_ld" v-for="(item,index) in bulkList" :key="item.id">
					<view class="commodity flex_ld">
						<text>{{item.goods_number}}/{{item.circulation}}</text>
						<view class="commodity_c flex_c">
							<text class="hoarding">防囤</text>
						</view>
						<text>{{item.prevent_hoarding_price}}</text>
					</view>
					<view class="selects">
						<u-icon name="checkmark-circle" :color="item.selected ? '#FF2CDF':'#ffffff'" size="18"
							@click="isClickDuo(item,index)"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="empty2"></view>
		<view class="btn_qs">
			<view class="log_out  flex_c" :class="selectId.length>0?'':'bgss'" @click="clickSell" v-if="startTime && endTime">
				<image v-if="selectId.length" class="highlights" src="../../static/image/mask.png" mode=""></image>
				<text>出售</text>
			</view>
			<view class="log_out bgss flex_c"   v-else >
				<text>未开始</text>
			</view>
		</view>
		<!-- 支付弹窗 -->
		<u-popup :show="showPay" @close="showPay = false" closeable bgColor="transparent">
			<view class="pay flex_ZC">
				<text>购买信息</text>
				<view class="pay_box flex_Z">
					<view class="pay_box_c flex_ld">
						<text>价格</text>
						<text class="c0">{{allMoney}}</text>
					</view>
					<view class="pay_box_c flex_ld" >
						<text>出售数量</text>
						<text class="c0 f28">x {{selectId.length}}</text>
					</view>
					<view class="pay_money  flex_ld">
						<text>可到账金额</text>
						<view class=" flex_dq">
							<image class="pay_img" src="../../static/icon/i_money.png" mode=""></image>
							<text class="c0 go_pay">{{totalPrice}}</text>
						</view>
					</view>
				</view>
				<view class="buyNow flex_c" @click="isComplete">
					<image class="highlights" src="../../static/image/mask.png" mode=""></image>
					<text>确认出售</text>
				</view>
			</view>
		</u-popup>
		<u-keyboard ref="uKeyboard" dotDisabled mode="number" closeOnClickOverlay :tooltip="false" :show="keyboardShow"
			@close="keyboardShow = false" @change="valChange" @backspace="backspace">
			<view class="keyboardss flex_ZC">
				<text>安全密码</text>
				<u-code-input dot space="26" v-model="securityPwd"></u-code-input>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	import {
		batchGoods,
		batchRent,
		resaleConfig
	} from "../../api/store.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				ids: '',
				allMoney: 0, //多选的总价
				state: false, //切换
				isSelect: false, //全选多选
				showPay:false, //弹窗
				keyboardShow: false, //输入框
				goumai:false,
				startTime:'',
				endTime:'',
				securityPwd: '', //安全密码
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				Hallconfig:{}, //配置信息
				guidancePrice:'',//指导价
				handlingFees:'',//交易手续费
				salesDetail: {},
				bulkList: [],
				selectId: [], // 多选的id
				marketAllList: [], //正在出售的商品
			}
		},
		onLoad(e) {
			this.ids = e.id
			this.initList()
			this.isResaleConfig()
		},
		computed:{
			// 计算总价
			totalPrice() {
				return (this.allMoney - (this.allMoney   * this.handlingFees  )).toFixed(2)
			},
		},
		methods: {
			// 配置信息
			isResaleConfig() {
				resaleConfig().then(res => {
					console.log(res)
					const timestamp = Math.round(new Date().getTime() / 1000);
					console.log(timestamp);
					console.log(res.data.hatch_goods_sell_start_time);
					this.startTime = timestamp  > res.data.hatch_goods_sell_start_time
					this.endTime = timestamp  < res.data.hatch_goods_sell_end_time
					console.log(this.startTime);
					console.log(this.endTime);
					
					this.Hallconfig = res.data
					this.handlingFees = res.data.hatch_transaction_fees * 0.01
				})
			},
			// 初始化列表
			initList() {
				let data = {
					hatch_goods_pid: this.ids,
				}
				batchGoods(data).then(res => {
					console.log(11111, res);
					if (res.code == 1) {
						this.salesDetail = res.data
						this.guidancePrice = res.data.guidance_price
						let list = res.data.member_space;
						this.bulkList = this.page == 1 ? list : this.bulkList.concat(list);
						console.log(this.bulkList);
						if (list.length < this.size) this.status = 'nomore';
					}
				})
			},
			// 平台首发创建订单并支付
			isCreateOrder() {
				let data = {
					id: this.selectId.join(),
					price: this.allMoney,
					password: this.securityPwd
				}
				uni.showLoading({
					title: '加载中'
				});
				batchRent(data).then(res => {
					console.log(res)
					uni.hideLoading()
					this.securityPwd = ''
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/marketorder/marketorder?id=' + 2
							})
						}, 1500);
					}
				})
			},
			// 多选
			isClickDuo(item, index) {
				// this.temporary = item
				// console.log(item);
				// console.log(index);
				let idIndex = this.selectId.indexOf(item.id);
				console.log(idIndex);
				this.bulkList[index].selected = !this.bulkList[index].selected;
				// 如果点击得已经被勾选
				// ----------------- 当前指导价大于防屯价用防屯价计算，反之用指导价计算 ------------------------
				if (idIndex != -1) {
					//这个返回的是被删除的内容
					this.selectId.splice(idIndex, 1);
					if(this.guidancePrice > item.prevent_hoarding_price){
						this.allMoney -= Number(item.prevent_hoarding_price)
					}else{
						this.allMoney = Number(this.selectId.length * this.guidancePrice)
					}
				} else {
					this.selectId.push(item.id);
					if(this.guidancePrice > item.prevent_hoarding_price){
						this.allMoney += Number(item.prevent_hoarding_price)
					}else{
						this.allMoney = Number(this.selectId.length * this.guidancePrice)
					}
				}
				if (this.bulkList.length == this.selectId.length) {
					this.isSelect = true
				} else {
					this.isSelect = false
				}
				console.log(this.selectId);
				console.log(this.allMoney);
			},
			// 全选 反选
			changeQuan() {
				this.isSelect = !this.isSelect
				if (this.isSelect) {
					this.bulkList.forEach((item, index) => {
						if (!item.selected) {
							this.selectId.push(item.id);
							if(this.guidancePrice > item.prevent_hoarding_price){
								this.allMoney += Number(item.prevent_hoarding_price)
							}else{
								this.allMoney = Number(this.selectId.length * this.guidancePrice)
							}
						}
						this.bulkList[index].selected = true;

					})
					console.log(this.selectId);
					console.log(this.allMoney);
				} else {
					this.bulkList.forEach((item, index) => {
						this.bulkList[index].selected = false;
						this.selectId = [];
						this.allMoney = 0
					})
					console.log(this.selectId);
					console.log(this.allMoney);
				}
			},

			// 切换
			changeUp() {
				this.state = !this.state
				if (this.state) {
					let newList = this.bulkList.slice().sort((news, olds) => news.goods_number - olds.goods_number)
					this.bulkList = newList
				} else {
					let newList = this.bulkList.slice().sort((news, olds) => olds.goods_number - news.goods_number)
					this.bulkList = newList
				}
			}, 
			// 出售
			clickSell() {
				if(this.selectId.length == 0){
					uni.$u.toast('请选择出售商品')
					return;
				}
				this.showPay = true
			},
			// 确认出售
			isComplete() {
				this.showPay = false
				this.keyboardShow = true
			},
			// 输入密码
			valChange(val) {
				if (this.securityPwd.length <= 6) {
					this.securityPwd += val;
					console.log(this.securityPwd);
				}
				if (this.securityPwd.length >= 6) {
					this.keyboardShow = false
					this.isCreateOrder()
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
					that.page = 1,
					that.search = '',
					that.bulkList = [],
					that.initList()
			}, 800);
		},
		//触底加载
		// onReachBottom() {
		// 	console.log('触底加载');
		// 	if (this.status != 'nomore') {
		// 		this.page = this.page + 1
		// 		this.initList()
		// 	}
		// }
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>

<style scoped>
	.bulk_box {
		width: 690rpx;
		height: 254rpx;
		background: #3C2F65;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 30rpx auto;
	}

	.bulk_l {
		margin: 0 24rpx;
	}

	.bulk_l>image {
		width: 206rpx;
		height: 206rpx;
		border-radius: 16rpx;
	}

	.bulk_r {
		width: 50%;
		/* background: pink; */
	}

	.bulk_r_top {
		font-size: 32rpx;
		color: #ffffff;
		/* background: pink; */
	}

	.bulk_r_center {
		width: 95%;
		font-size: 26rpx;
		color: #A6A5AF;
		margin: 16rpx 0;
	}

	.money>image {
		width: 28rpx;
		height: 28rpx;
	}

	.saleslist {
		width: 690rpx;
		margin: 0 auto;
	}

	.sales_l {
		font-size: 32rpx;
		color: #ffffff;
	}

	.sales_l>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
	}

	.sales_r {
		font-size: 28rpx;
		color: #ffffff;
	}

	.sales_r>text {
		margin-left: 6rpx;
	}

	.saleslist_center {
		margin: 30rpx 0;
	}

	.saleslist_center_box {
		width: 686rpx;
		height: 88rpx;
		background: #3C2F65;
		border-radius: 20rpx;
		margin: 0 auto 30rpx;
	}

	.commodity {
		width: 90%;
		font-size: 28rpx;
		color: #ffffff;
		margin-left: 24rpx;
	}

	.commodity>text:nth-child(1) {
		width: 30%;
	}

	.commodity>text:nth-child(3) {
		width: 30%;
		/* background:skyblue; */
	}

	.commodity_c {
		width: 40%;
		/* background: pink; */
	}

	.hoarding {
		width: 84rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		text-align: center;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 8rpx;
	}

	.selects {
		width: 10%;
	}

	.actives {
		color: #FF2CDF !important;
	}

	.log_out {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 92%;
	}

	.log_out>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	.bgs{
		
	}
	
	.pay {
		width: 100%;
		background: #2A2753;
		border-radius: 20rpx 20rpx 0 0;
		color: #ffffff;
		overflow: auto;
	}
	
	.pay>text {
		font-size: 36rpx;
		margin: 60rpx 0;
	}
	
	.pay_box {
		width: 694rpx;
		/* height: 300rpx; */
		background: #353168;
		border-radius: 18rpx;
	}
	
	.pay_box_c {
		font-size: 24rpx;
		padding: 28rpx 28rpx 0;
	}
	
	.pay_box_c>text:nth-child(1) {
		color: #A7A4AD;
	}
	
	.pay_box_c>text:nth-child(2) {
		width: 70%;
		text-align: right;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	
	.pay_money {
		width: 92%;
		padding: 30rpx 0;
		margin: 30rpx auto 0;
		font-size: 24rpx;
		border-top: 1rpx solid #ffffff20;
	}
	.pay_img{
		width: 32rpx;
		height: 32rpx;
	}
	.rough{
		width: 60%;
		/* background: pink; */
	}
	.pay_btn{
		min-width: 176rpx;
		padding: 4rpx 0;
		background: #A423EA;
		color: #ffffff;
		border-radius:40rpx;
	}
	.pay_btn_l>image{
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}
	.pay_btn_r>image{
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}
	.bgss{
		opacity: 0.5;
	}
	.btn_qs{
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 140rpx;
		/* background: pink; */
		background: #211E38;
	}
	
	.go_pay {
		font-size: 36rpx;
		font-family: 'iconfont2';
		margin-left: 10rpx;
	}
	
	.buyNow {
		position: relative;
		width: 92%;
		margin: 50rpx auto ;
	}
	.buyNow>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	.nobuyNow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 92%;
		margin: 50rpx auto;
		padding: 20rpx 0;
		border-radius:40rpx;
		background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		opacity: 0.5;
	}
	.nobuyNow>text{
		margin: 0 10rpx;
	}
	
	.keyboardss {
		width: 690rpx;
		margin: 20rpx auto;
	}

	
	/deep/.u-code-input {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		margin: 20rpx 0;
		/* background: pink; */
	}
	/deep/.u-code-input__item{
		margin-right: 0px !important;
	}
	/deep/.u-count-down__text{
		color: #ffffff !important;
	}
	
</style>